<template>
  <div id="dept">
    <!-- 头部标题 -->
    <div class="header">
      <span>首页 >> 密码重置</span>
    </div>
    <div class="inner">
      <span>修改密码</span>
      <div class="line">
        <span>原密码</span>
        <el-input
          show-password
          v-model="reset.oldPwd"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="line">
        <span>新密码</span>
        <el-input
          show-password
          v-model="reset.newPwd"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="line4">
        <span>确认密码</span>
        <el-input
          show-password
          v-model="confirmPwd"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <el-button @click="editPwd" type="primary">修改密码</el-button>
    </div>
  </div>
</template>

<script>
import { reset } from "@/api/userAPI";
export default {
  name: "daptManage",
  data() {
    return {
      reset: {
        loginId: "",
        oldPwd: "",
        newPwd: "",
      },
      confirmPwd: "",
    };
  },
  methods: {
    // 修改密码
    editPwd: function () {
      if (this.reset.newPwd != this.confirmPwd) {
        this.$message({
          message: "两次密码不一致，请重新输入",
          type: "error",
        });
        return;
      }
      reset(this.reset).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          localStorage.removeItem("id");
          this.$router.push({
            path: "/Login",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
  mounted() {
    this.reset.loginId = localStorage.getItem("id");
  },
};
</script>

<style lang="less" scoped>
#dept {
  .header {
    background-color: deepskyblue;
    display: flex;
    height: 30px;
    align-items: center;
  }
  .inner {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    align-items: center;
    .line,
    .line4 {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 330px;
      .el-input {
        width: 230px;
        margin-left: 40px;
      }
    }
    .line4 {
      margin-bottom: 20px;
      .el-input {
        margin-left: 23px;
      }
    }
  }
}
</style>